<template>
    <el-dialog
        :visible="visible"
        width="640px"
        @close="visible = false"
    >
        <div class="image-clip-box" ref="box" @mousemove="onMove" @mouseup="onMouseUp">
            <img
                :src="metaData"
                ref="image"
                :style="imageStyle"
                />
            <!-- <div
                class="selector-box"
                @mousedown="selectorDown"
                ref="selector"
                :style="{
                    top: top,
                    left: left,
                    width: '512px',
                    height: '288px',
                }"
            >
                <div class="left-top" @mousedown="onMouseDown($event, 'leftTop')"/>
                <div class="right-top" @mousedown="onMouseDown($event, 'rightTop')"/>
                <div class="left-bottom" @mousedown="onMouseDown($event, 'leftBottom')"/>
                <div class="right-bottom" @mousedown="onMouseDown($event, 'rightBottom')"/>
            </div> -->
            <vue-draggable-resizable
                :prevent-deactivation="true"
                :w="width"
                :h="height"
                :x="left"
                :y="top"
                :active="true"
                :lockAspectRatio="lockRatio"
                @dragstop="onDragEnd"
                class-name="vdr-drag-box"
                class-name-active="vdr-drag-box-active"
                :grid="[10, 10]"
                @resizestop="onResizeEnd"
            >
            </vue-draggable-resizable>
        </div>
        <div class="image-clip-footer" slot="footer">
            <el-button @click="$emit('close')">取消</el-button>
            <el-button @click="handleConfirm" type="success">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
    props: [
        'metaData', 'visible', 'imageWidth', 'imageHeight',
        'pageConfig', 'lockRatio',
    ],
    components: {
        VueDraggableResizable,
    },
    mounted() {
    },
    data() {
        return {
            left: 0,
            top: 0,
            width: 512,
            height: 288,
            wrapDown: false,
        };
    },
    computed: {
        imageStyle() {
            const { imageWidth: width, imageHeight: height } = this;
            const boundingWidth = 600;
            const boundingHeight = 500;
            const scale = width / boundingWidth / (height / boundingHeight);
            let resultWidth = 0;
            let resultHeight = 0;
            console.log('width===>', width, height,scale);
            if (scale < 1) {
                // 图片宽度比高度小
                resultHeight = boundingHeight;
                resultWidth = boundingHeight / height * width;
            } else {
                resultWidth = boundingWidth;
                resultHeight = boundingWidth / width * height;
            }
            return {
                width: `${resultWidth}px`,
                height: `${resultHeight}px`,
            };
        },
    },
    methods: {
        onDragEnd(x, y) {
            this.left = x;
            this.top = y;
        },
        onResizeEnd(x, y, w, h) {
            this.left = x;
            this.top = y;
            this.width = w;
            this.height = h;
        },
        handleConfirm() {
            const imageBounding = this.$refs.image.getBoundingClientRect();
            const boxBounding = this.$refs.box.getBoundingClientRect();
            const { width: imageWidth, left: imageLeft, top: imageTop } = imageBounding;
            const { left: boxLeft, top: boxTop } = boxBounding;
            const { width: selectorWidth, left: selectorLeft, top: selectorTop } = this;
            const imageX = imageLeft - boxLeft;
            const imageY = imageTop - boxTop;
            const scale = selectorWidth / imageWidth;
            const leftScale = (selectorLeft - imageX) / selectorWidth;
            const topScale = (selectorTop - imageY) / selectorWidth;
            this.$emit('change', {
                data: this.metaData,
                scale,
                leftScale,
                topScale,
            });
            this.$emit('close');
        },
        selectorDown(e) {
            const { clientX, clientY } = e;
            this.lastX = clientX;
            this.lastY = clientY;
            this.wrapDown = true;
        },
        onMouseDown(e, type) {
            e.stopPropagation();
            const { clientX, clientY } = e;
            this.lastX = clientX;
            this.lastY = clientY;
            if (type === 'leftTop') {
                this.wrapDown = false;
                this.leftTop = true;
                this.rightTop = false;
                this.leftBottom = false;
                this.rightBottom = false;
            } else if (type === 'rightTop') {
                this.wrapDown = false;
                this.leftTop = false;
                this.rightTop = true;
                this.leftBottom = false;
                this.rightBottom = false;
            } else if (type === 'leftBottom') {
                this.wrapDown = false;
                this.leftTop = false;
                this.rightTop = false;
                this.leftBottom = true;
                this.rightBottom = false;
            } else if (type === 'rightBottom') {
                this.wrapDown = false;
                this.leftTop = false;
                this.rightTop = false;
                this.leftBottom = false;
                this.rightBottom = true;
            }
        },
        onMove(e) {
            e.preventDefault();
            const { clientX, clientY } = e;
            const deltaX = clientX - this.lastX;
            const deltaY = clientY - this.lastY;
            const { pageConfig = {} } = this;
            const { width: pageWidth, height: pageHeight } = pageConfig;
            const ratio = pageHeight / pageWidth;
            if (this.wrapDown) {
                const bounding = this.$refs.selector.style;
                const { left, top } = bounding;
                this.$refs.selector.style.left = `${parseInt(left) + deltaX}px`;
                this.$refs.selector.style.top = `${parseInt(top) + deltaY}px`;
            }
            if (this.leftTop) {
                const bounding = this.$refs.selector.style;
                const { left, top, width, height } = bounding;
                this.$refs.selector.style.left = `${parseInt(left) + deltaX}px`;
                this.$refs.selector.style.top = `${Math.round(parseInt(top) + deltaX * ratio)}px`;
                const targetWidth = parseInt(width) - deltaX;
                this.$refs.selector.style.width = `${targetWidth}px`;
                this.$refs.selector.style.height = `${Math.round(ratio * targetWidth)}px`;
            }
            if (this.rightTop) {
                const bounding = this.$refs.selector.style;
                const { height, top } = bounding;
                const targetHeight = parseInt(height) - deltaY;
                this.$refs.selector.style.top = `${Math.round(parseInt(top) + deltaY)}px`;
                this.$refs.selector.style.width = `${Math.round(targetHeight / ratio)}px`;
                this.$refs.selector.style.height = `${Math.round(targetHeight)}px`;
            }
            if (this.rightBottom) {
                const bounding = this.$refs.selector.style;
                const { width } = bounding;
                const targetWidth = parseInt(width) + deltaX;
                this.$refs.selector.style.width = `${targetWidth}px`;
                this.$refs.selector.style.height = `${Math.round(ratio * targetWidth)}px`;
            }
            if (this.leftBottom) {
                const bounding = this.$refs.selector.style;
                const { height, left, width } = bounding;
                const targetWidth = parseInt(width) - deltaX;
                this.$refs.selector.style.left = `${parseInt(left) + deltaX}px`;
                this.$refs.selector.style.height = `${targetWidth * ratio}px`;
                this.$refs.selector.style.width = `${Math.round(targetWidth)}px`;
            }
            this.lastX = clientX;
            this.lastY = clientY;
        },
        onMouseUp(e) {
            this.wrapDown = false;
            this.leftTop = false;
            this.rightTop = false;
            this.leftBottom = false;
            this.rightBottom = false;
        }
    }
}
</script>

<style lang="less" scoped>
.image-clip-box {
    width: 600px;
    height: 500px;
    background-image: url('../assets/image/imageBack.jpeg');
    text-align: center;
    position: relative;
    .selector-box {
        position: absolute;
        left: 0;
        top: 0;
        border: solid 2px rgb(93, 159, 247);
        .left-top, .right-top, .left-bottom, .right-bottom {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 100%;
            position: absolute;
            background: rgb(93, 159, 247);
        }
        .left-top {
            left: -6px;
            top: -6px;
            
        }
        .right-top {
            right: -6px;
            top: -6px;
        }
        .left-bottom {
            left: -6px;
            bottom: -6px;
        }
        .right-bottom {
            right: -6px;
            bottom: -6px;
        }
    }
    .vdr-drag-box{
        color: rgb(93, 159, 247);
        cursor: move;
        position: absolute;
        left: 0;
        top: 0;
    }
    .vdr-drag-box-active {
        border: solid 2px rgb(93, 159, 247);
    }
}
.image-clip-footer {

}
</style>